<template>
	<el-container>
		<el-aside width="200px">
			<el-menu background-color="#545c64" text-color="#fff" active-text-color="rgb(64, 158, 255)"
				class="el-menu-vertical-demo" :router="true">
				<el-menu-item index="/index">
					<i class="el-icon-s-home"></i><span>首页</span>
				</el-menu-item>
				<el-submenu v-for="menu in menuList" :index="menu.route? menu.route: '/index'" :key="menu.menuId">
					<template slot="title"><i :class="menu.icon"></i>{{menu.menuName}}</template>
					<el-menu-item v-for="c in menu.children" :index="c.route" :key="c.menuId">
						<i :class="c.icon"></i>{{c.menuName}}
					</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>

		<el-container style="height: 100%;margin-left: 200px;">
			<el-header style="">
				<el-dropdown @command="handleCommand">
					<i class="el-icon-setting" style="margin-right: 15px"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="logout">退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span>{{username}}</span>
			</el-header>

			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		logout
	} from '@/api/auth'
	import {
		removeLoginUser,
		getLoginUser
	} from '@/utils/storage'

	import store from '@/store'
	
	export default {
		name: 'home',
		data() {
			return {
				username: 'User'
			}
		},
		created() {
			this.username = getLoginUser().userName;
		},
		methods: {
			handleCommand(cmd) {
				eval(`this.${cmd}()`)
			},
			logout() {
				logout().then(res => {
					removeLoginUser()
					store.dispatch('clearMenuList')
					this.$router.push('/login')
				});
			}
		},
		computed: mapState({
			menuList: state => state.menu.menuList
		})
	}
</script>

<style scoped>
	.el-header {
		/* background-color: #B3C0D1; */
		color: #333;
		line-height: 60px;
		border-bottom: thin dotted #B3C0D1;
		text-align: right;
		font-size: 12px;
		height: 50px;
		padding-top: 4px;
	}

	.el-aside {
		background-color: #545c64;
		color: #fff;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		overflow: hidden;
	}

	/deep/.el-menu {
		border-right: solid 0px #545c64;
		text-align: left;
	}
</style>
